<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link rel="stylesheet" href="css/index.css">
    <title>52</title>
</head>

<body>
    <!-- 侧滑栏 -->
    <!--手机导航栏侧滑-->
    <!--手机导航栏-->
    <div id="mobile-menu" class="mobile-nav visible-xs visible-sm hide-nav shouye">
        <ul>
            <li id="0">
                <div><img src="http://first.52carlife.com/yidongicon_sy@2x.png"></div>
                <div><a href="javascript:void(0)">首页</a></div>
            </li>
            <li id="1">
                <div><img src="http://first.52carlife.com/yidongicon_cpjs@2x.png"></div>
                <div><a href="javascript:void(0)">对外合作</a></div>
            </li>
            <li id="2">
                <div><img src="http://first.52carlife.com/yidongicon_swhz@2x.png"></div>
                <div><a href="javascript:void(0)">产品介绍</a></div>
            </li>
            <li id="3">
                <div><img src="http://first.52carlife.com/yidongicon_gywm@2x.png"></div>
                <div><a href="javascript:void(0)">关于我们</a></div>
            </li>
            <li id="4">
                <div><img src="http://first.52carlife.com/yidongicon_bzzx@2x.png"></div>
                <div><a href="javascript:void(0)">帮助中心</a></div>
            </li>
        </ul>
    </div>
    <div class="headertopY" id="headertopY">
        <!-- 头部 -->
        <header>
            <div class="container top">
                <div class="row">
                    <div class="col-9 top-name">
                        <p>52嗨停</p>
                    </div>
                    <div class="col-3 top-right">
                        <div class="searchBox-icon">
                            <img src="http://first.52carlife.com/yidongicon_ss@2x.png">
                        </div>
                        <div class="nav-icon" id="mobile-nav-taggle">
                            <img src="http://first.52carlife.com/yidongicon_lb@2x.png" alt="52">
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- 大图片 -->
        <div class="center-img">
            <div class="img-des">
                <p>52嗨停</p>
                <span> 一款停洗车神器</span>
            </div>
            <div class="img-pic">
                <img src="http://first.52carlife.com/yidongIphone%20Mockup%20@3x@2x.png" alt="52">
            </div>
        </div>
        <!-- 中间按钮 -->
        <div class="container">
            <div class="row">
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_gsjj@2x.png" alt="52">
                    <span id="companyTravel">公司简介</span>
                </div>
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_ys@2x.png" alt="52">
                    <span id="advantage">优势特点</span>
                </div>
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_td@2x.png" alt="52">
                    <span id="languageTeam">企业团队</span>
                </div>
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_hz@2x.png" alt="52">
                    <span id="serviceProject">对外合作</span>
                </div>
            </div>
        </div>
        <!-- 第二层按钮 -->
        <div class="container">
            <div class="row">
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_cp@2x.png" alt="52">
                    <span id="productShow">产品展示</span>
                </div>
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_new@2x.png" alt="52">
                    <span id="newInformation">新闻资讯</span>
                </div>
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongicon_anli@2x.png" alt="52">
                    <span id="serviceCase">服务案例</span>
                </div>
                <div class="col-3 company-travel">
                    <img src="http://first.52carlife.com/yidongzxlx_icon.png" alt="52">
                    <span id="onlineContact">在线联系</span>
                </div>
            </div>
        </div>
        <!-- 整体介绍 container-->
        <div class="content-des">
            <div class="content-desCenter">
                <div class="desCenter-left">
                    <img src="http://first.52carlife.com/yidongpic_tupian1@2x.png" alt="52">
                </div>
                <div class=" desCenter-right">
                    <div class="right-img">
                        <img src="http://first.52carlife.com/yidongpic_tupian2@2x.png" alt="52">
                    </div>
                    <div class="right-des">
                        <img src="http://first.52carlife.com/yidong%E2%80%9C@2x.png" alt="52">
                        <div class="right-des-span">
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;广西卡莱网络科技有限公司，成立于2017</p>
                            <p>年1月，是一家大数据时代背景下新诞生
                                的典</p>
                            <p>型的互联网+企业，公司以互联网为依托，深</p>
                            <p>度开发汽车后市场。
                                卡莱科技在成立之初，就深刻认识到时代趋势，决定以...</p>
                        </div>
                        <img src="http://first.52carlife.com/yidong%E2%80%9C@2x.png" alt="52">
                    </div>

                </div>
            </div>
        </div>
        <!-- 资源整合 -->
        <div class="container resources-banner">
            <img src="http://first.52carlife.com/yidongpic_gntd@2x.png" alt="52">
        </div>
        <!-- 公司人员 -->
        <div class="container company-employees">
            <div class="employees-img">
                <img src="http://first.52carlife.com/yidongpic_td01@3x@2x.png" alt="52">
            </div>
            <div class="employees-des">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;卡莱科技聚集了一批朝气蓬勃、积极向上、勇于创新、敢于挑战的高素质专业型人才，他们有来自互联网领域的高精尖科技型人才，也有来自市场营销的销售精英，在时代与梦想的召唤下，凝聚到一起。我们青春洋溢、我们不畏艰辛，在卡莱科技这艘大船上，乘着大数据时代的东风，我们像勇敢的水手，坚韧果敢地驶向互联网的蓝海。</p>
            </div>
        </div>
        <!-- 服务项目 -->
        <div class="container service-from">
            <img src="http://first.52carlife.com/yidongpic_dwfw@2x.png" alt="52">
        </div>
        <!-- 嗨停介绍视频 -->
        <div class="container project_des">
            <!-- 介绍 -->
            <div class="des-video">
                <!-- <div class="video-btn" id="videoBtn">
                    <img src="http://first.52carlife.com/yidong%E6%9A%82%E5%81%9C.png" alt="52">
                </div> -->
                <!-- 视频 -->

                <div class="videoYouku">
                    <iframe height=190 width=318 src='http://player.youku.com/embed/XNDAyMzM1MjkzMg==' frameborder=0
                        'allowfullscreen'></iframe>
                </div>
            </div>





            <!-- 文字描述 -->
            <div class="des-text">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;以移动互联网为平台，立足柳州、面向全国，网罗全国2亿车主，深度开发汽车后市场O2O模式，为车主提供更便捷、安全、智能化的车生活体验。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;实时更新空位数量、一键导航、在线预约车位、无感支付、闲置时段车位共享。</p>
            </div>
            <!-- 关注 -->
            <div class="des-focus">
                <div class="row">
                    <div class="col-6 focus-text">
                        <p>52嗨停应用</p>
                        <p>一款停洗车神器</p>
                    </div>
                    <div class="col-6 focus-img">
                        <img src="http://first.52carlife.com/yidongPIc_xcx@2x.png" alt="52">
                    </div>
                </div>
            </div>
        </div>
        <!-- 首个建立 -->
        <div class="container one-pilot">
            <div class="row pilot-content">
                <div class="col-6 pilot-left">
                    <img src="http://first.52carlife.com/yidongpic_XWZX@2x.png" alt="52">
                </div>
                <div class="col-6 pilot-right">
                    <p>2018.03.15 09:41:43</p>
                    <p>建设首个无感支付停车场试点</p>
                    <p>在柳州本地建设首个无感支付停车场示范点，加快实行构建智慧型城市及停车诱导系统，提高便民生活品质</p>
                </div>
            </div>
        </div>
        <!-- 什么城市规划不知道 -->
        <div class="container">
            <div class="row parking-lot">
                <div class="col-3 parking-img">
                    <img src="http://first.52carlife.com/yidongpic_csgh@2x.png" alt="52">
                    <div class="parking-title">
                        <p>商业综合体</p>
                    </div>
                </div>
                <div class="col-3 parking-img">
                    <img src="http://first.52carlife.com/yidongpic_zhcc@2x.png" alt="52">
                    <div class="parking-title">
                        <p>停车场</p>
                    </div>
                </div>
                <div class="col-3 parking-img">
                    <img src="http://first.52carlife.com/yidongpic_o20sq@2x.png" alt="52">
                    <div class="parking-title">
                        <p>智慧社区</p>
                    </div>
                </div>
                <div class="col-3 parking-img">
                    <img src="http://first.52carlife.com/yidongpic_csgh@2x.png" alt="52">
                    <div class="parking-title">
                        <p>城市规划</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer-top">
            <div class="footer-top-left">
                <img src="http://first.52carlife.com/yidonglogo_logo@2x.png" alt="52">
            </div>
            <div class="footer-top-right">
                <span>快捷导航</span>
            </div>
        </div>
        <!-- 底部底部 -->
        <div class="footer-bottom">
            <div class="bottom-top">
                <div class="row">
                    <div class="col-3">关于卡莱 </div>
                    <div class="col-3">联系我们 </div>
                    <div class="col-3"> 法律声明 </div>
                    <div class="col-3"> 帮助中心</div>
                </div>
            </div>
            <div class="bottom-bottom">
                <p>&copy;备案号:桂Icp备17003197号</p>
            </div>
        </div>
    </div>



    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>


    <script>
        //   点击到指定位置
        $(".shouye>ul>li").click(function () {
            var n = parseInt($(this)[0].id);
            var x = 0;
            switch (n) {
                case 0:
                    x = 0;
                    break;
                case 1:
                    x = 1082;
                    break;
                case 2:
                    x = 1260;
                    break;
                case 3:
                    x = 680;
                    break;
                case 4:
                    x = 2237;
                    break;
                default:
                    x = 252;
            }
            setTimeout(function () {
                $("body,html").scrollTop(x);
            }, 1000)
        });
        // 点击显示侧边栏
        $("#mobile-nav-taggle").click(function () {
            var mobileMenu = $("#mobile-menu");
            var scollY = $("#headertopY");
            if (mobileMenu.hasClass("show-nav")) {
                setTimeout(function () {
                    mobileMenu.addClass("hide-nav").removeClass("show-nav");
                    scollY.addClass("headertopY").removeClass("headertopN");
                    //启用滚动条
                    $(document.body).css({
                        "overflow-x": "auto",
                        "overflow-y": "auto"
                    });
                }, 100)
            } else {
                setTimeout(function () {
                    mobileMenu.addClass("show-nav").removeClass("hide-nav");
                    scollY.addClass("headertopN").removeClass("headertopY");
                    //禁止滚动条
                    $(document.body).css({
                        "overflow-x": "hidden",
                        "overflow-y": "hidden"
                    });

                }, 100)
            }
        })
        // 点击除按钮和弹框之外任意地方隐藏表情
        $("body").click(function (e) {
            if (!$(e.target).closest("#mobile-nav-taggle").length) {
                setTimeout(function () {
                    $("#mobile-menu").addClass("hide-nav").removeClass("show-nav");
                    $("#headertopY").addClass("headertopY").removeClass("headertopN");
                    //启用滚动条
                    $(document.body).css({
                        "overflow-x": "auto",
                        "overflow-y": "auto"
                    });
                }, 100)
            }
        });
        // 点击视频按钮
        // $("#videoBtn").click(function (e) {
        //     $(".videoYouku").show();
        //     $(".video-btn").hide();
        // })
        // 跳转
        $("#companyTravel").click(function (e) {
            window.location.href = "pages/companyTravel.html"
        })
        $("#advantage").click(function (e) {
            window.location.href = "pages/advantage.html"
        })
        $("#languageTeam").click(function (e) {
            window.location.href = "pages/languageTeam.html"
        })
        $("#serviceProject").click(function (e) {
            window.location.href = "pages/serviceProject.html"
        })
        $("#productShow").click(function (e) {
            window.location.href = "pages/productShow.html"
        })
        $("#newInformation").click(function (e) {
            window.location.href = "pages/newInformation.html"
        })
        $("#serviceCase").click(function (e) {
            window.location.href = "pages/serviceCase.html"
        })
        $("#onlineContact").click(function (e) {
            window.location.href = "pages/onlineContact.html"
        })
    </script>


</body>

</html>